<template>
    <!-- 合作银行模块 -->
    <div class="coopbank w clearfix">
        <ul>
            <li class="ciearfix">
                <div class="left">
                    <h3> 德清农商银行</h3>
                    <p>德清农商银行是于2012年改制成立的股份制社区性地方金融机构,现有注册资本7个亿。全辖有营业网点40家(包括1个营业部、15家支行、24家分理处),从业人员550多人,是全县金融机构中服务网点最多、服务范围最广、从业人员最多、服务质量最好的金融机构。改革发展50多年来,德清农商银行始终坚持以服务“三农”和中小企业为己任,深化体制改革,转变经营模式,创新服务管理,提升发展品质,各项事业取得了长足发展,也为支持德清经济做出了积极贡献。</p>
                    <p>“真诚合作、贴心服务”是德清农商银行的服务宗旨。“更高、更强、更优”是德清农商银行的目标。在科学发展观和县委、县政府“秀美、富裕、和谐”发展战略指导下,德清农商银行将按照现代金融企业发展要求,以“一流的经营业绩、严密的内控体系、完善的服务功能、高素质的人才队伍”为目标,坚持以服务县域经济社会和谐发展为中心,为全县百姓提供更好、更优的金融服务。</p>
                    <p>清以至淳，德行天下。德清农商银行将以自身的行动，演绎和发扬“德”文化，为社会、为国家、为德清作出更大贡献。</p>
                </div>
                <div class="right"><img src="../../assets/style/img/coopbank_image/招行.png" alt=""></div>
            </li>
            <li class="ciearfix">
                <div class="odd_l"><img src="../../assets/style/img/coopbank_image/德清胡商银行.png" alt=""></div>
                <div class="odd_r">
                    <h3>浙江德清湖商村镇银行股份有限公司</h3>
                    <p>浙江德清湖商村镇银行股份有限公司是经银行业监督管理委员会批准、由浙江南浔农村商业银行股份有限公司对外主发起设立的股份制银行，2013年5月28日正式成立，注册资本2.16亿元。</p>
                    <p>作为一家新型农村金融机构，浙江德清湖商村镇银行依托当地经济发展优势，以支持德清经济发展为己任，围绕“严管理，促发展”的主题，秉承“为三农服务”的使命，坚持“想您所想，为您所享”的经营理念，坚持服务于当地小微企业、个体私营业主和广大农户，以完善的公司治理和灵活的市场机制为依托，致力成为一流的区域性精品银行。</p>
                    <p>目前下设机构网点19个，分别为：营业部、新市支行、禹越支行、新安支行、洛舍支行、钟管支行、乾元支行、雷甸支行、莫干山支行、舞阳支行、高桥支行、下舍支行、干山支行、三桥支行、士林支行、下渚湖支行和阜溪支行、康乾支行、健康路支行，现有员工240余人。德清湖商村镇银行经过近8年的发展，如今已形成多层次、广覆盖的“三农”金融服务体系。近年来先后获得中国服务县域经济十佳村镇银行、浙江省小微金融服务工作先进集体、湖州市第十三届“消费者信得过单位”、湖州市先进银行、湖州市平安金融单位、市直机关先进基层党组织，德清县文明单位，德清县服务业成长之星企业等荣誉。</p>
                </div>
            </li>
            <li class="ciearfix">
                <div class="left">
                    <h3>浙商银行</h3>
                    <p>浙商银行股份有限公司（简称“浙商银行”）是12家全国性股份制商业银行之一，于2004年8月18日正式开业，总部设在浙江杭州。2016年3月30日，在香港联交所上市，股票代码“2016.HK”；2019年11月26日，在上海证券交易所上市，股票代码“601916”，系全国第13家“A+H”上市银行。</p>
                    <p>开业以来，浙商银行立足浙江，面向全国，稳健发展，已成为一家基础扎实、效益优良、成长迅速、风控完善的优质商业银行。</p>
                    <p>浙商银行顺应互联网信息技术发展新趋势和客户价值创造新需求，立足新发展阶段，贯彻新发展理念，以“两最”总目标为引领，全面实施平台化服务战略，坚持“服务实体经济、创新转型、合规经营、防化风险、提质增效”五项经营原则，打造区块链和物联网技术驱动双引擎，推动高质量发展，为客户提供开放、高效、灵活、共享、极致的综合金融服务。</p>
                    <p>截至2020年末，浙商银行在全国20个省（自治区、直辖市）及香港特别行政区设立了272家分支机构，实现了对长三角、珠三角、环渤海以及部分中西部地区的有效覆盖。2017年4月21日，首家控股子公司——浙江浙银金融租赁股份有限公司正式开业，迈出了综合化经营的第一步。2018年4月10日，香港分行正式开业，迈出了国际化布局的第一步。</p>
                </div>
                <div class="right"><img src="../../assets/style/img/coopbank_image/浙商.png" alt=""></div>
            </li>
              <li class="ciearfix">
                <div class="odd_l"><img src="../../assets/style/img/coopbank_image/农行.png" alt=""></div>
                <div class="odd_r">
                    <h3>中国农业银行</h3>
                    <p>本行的前身最早可追溯至1951年成立的农业合作银行。上世纪70年代末以来，本行相继经历了国家专业银行、国有独资商业银行和国有控股商业银行等不同发展阶段。2009 年1月，本行整体改制为股份有限公司。2010年7月，本行分别在上海证券交易所和香港联合交易所挂牌上市。</p>
                    <p>本行是中国主要的综合性金融服务提供商之一，致力于建设经营特色明显、服务高效便捷、功能齐全协同、价值创造能力突出的国际一流商业银行集团。本行凭借全面的业务组合、庞大的分销网络和领先的技术平台，向广大客户提供各种公司银行和零售银行产品和服务，同时开展金融市场业务及资产管理业务，业务范围还涵盖投资银行、基金管理、金融租赁、人寿保险等领域。截至2016年末，本行总资产195,700.61亿元，发放贷款和垫款97,196.39亿元，吸收存款150,380.01亿元，资本充足率13.04%，全年实现净利润1,840.60亿元。</p>
                    <p>截至2016年末，本行境内分支机构共计23,682个，包括总行本部、总行营业部、3个总行专营机构，37个一级（直属）分行，365个二级分行（含省区分行营业部），3,506个一级支行（含直辖市、直属分行营业部，二级分行营业部）、19,714个基层营业机构以及55个其他机构。境外分支机构包括10家境外分行和3家境外代表处。本行拥有14家主要控股子公司，其中境内9家，境外5家。</p>
                </div>
            </li>
        </ul>
        <!-- 客服服务模块start -->
        <div class="serviceperson clearfix">
            <div class="person">
                <div class="free left">免费咨询</div>
                <div class="only right" @click="isShow"><img src="../../assets/style/img/service_image/在线咨询.svg" alt=""></div>
            </div>
            <div class="service" v-show="flag">
                <div class="number">
                    <p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
                </div>
                <div class="message">
                    <i class="icon-wechat"></i>
                    <div class="dh">
                        <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                    </div>
                </div>
                <div class="input_content">
                    <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                    <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                    <button>发送</button>
                </div>
            </div>
        </div>
        <!-- 客服服务模块end -->
    </div>
</template>

<script>
// import '../service'

export default {
  name:'Coopbank',
  data() {
    return {
      flag:false
    }
  },
  methods: {
    isShow(){
      this.flag = !this.flag
    }
  },
}
</script>

<style lang='less' scoped>
.coopbank{
  position: relative;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  font-weight: 400;
li{
  h3{
      border-left: 4px solid #EE384A;
      padding-left: 10px;
      margin-bottom: 20px;
      // font-family: PingFangSC-Regular;
      font-size: 26px;
      color: #333333;
      // letter-spacing: 0;
      font-weight: 400;
  }
  p{
    padding-left: 6px;
    text-indent: 2em;
    // font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666666;
    // letter-spacing: 0;
    text-align: justify;
    line-height: 28px;
    // font-weight: 400;
  }
}
  ul{
    margin-top: 20px;
  li{
    float: left;
    margin-bottom: 40px;
  }
}
 .left{
    float: left;
    width: 640px;
  // height: 376px;
 }
 .right{
   margin-left: 40px;
   padding-top: 66px;
   float: right;
   width: 520px;
 }
 .odd_l{
  float: left;
  margin-right: 40px;
  padding-top: 66px;

 }
 .odd_r{
  float: right;
  width: 640px;
 }
}

// 客服咨询模块
.serviceperson{
  z-index: 999;
  position: absolute;
  top: 430px;
  right: -320px;
  width: 480px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    text-align: center;

    .free{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      background: #999;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .free::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>